<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>轮播图渐隐渐消</title>
	<script src="jquery-2.0.3.js"></script>
	<script src="index.js"></script>
	<style>
		.home { width: 1226px; margin: 0 auto; height: 460px; position: relative; overflow: hidden; cursor: pointer }
.home .container { position: relative; }
.container .banner { width: 8582px; position: absolute; left: 0px; }
.container .banner img { float: left; }
.container .banner_prev { display: inline-block; width: 41px; height: 69px; background-image: url("images/prev_icon1.png"); position: absolute; top: 195px; left: 10px; }
.container .banner_prev:hover { background-image: url("images/prev_icon2.png"); border-bottom-right-radius: 2px; border-top-right-radius: 2px; }
.container .banner_next { display: inline-block; width: 41px; height: 69px; background-image: url("images/next_icon1.png"); position: absolute; top: 195px; right: 10px; }
.container .banner_next:hover { background-image: url("images/next_icon2.jpg"); border-bottom-left-radius: 2px; border-top-left-radius: 2px; }
.container .banner_btn { position: absolute; right: 30px; top: 425px; }
.container .banner_btn span { display: inline-block; width: 6px; height: 6px; border: 2px solid #ADADAF; background-color: #87888B; border-radius: 50%; margin: 0 5px; cursor: pointer; float: left; }
.container .banner_btn span:hover { border: 2px solid #87888B; background-color: transparent; }
.circle { border: 2px solid #87888B!important; background-color: transparent!important; }
	</style>
</head>
<body>
<div class="home">
	<div class="container">
            <div class="banner">
                <img src="images/banner1.jpg" alt="">
                <img src="images/banner2.jpg" alt="">
                <img src="images/banner3.jpg" alt="">
                <img src="images/banner4.jpg" alt="">
                <img src="images/banner5.jpg" alt="">
            </div>
            <div class="banner_btn">
                <span class="circle"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <span class="banner-btn banner_prev"></span>
            <span class="banner-btn banner_next"></span>
        </div>
</div>
	 
</body>
<script type="text/javascript">

</script>
</html>